<script setup lang="ts">
import { ref } from "vue";

// vue中的动画效果 内置组件Transition

// 实现动画效果分两步:
// 1.Transition包裹要实现动画的元素或组件(注意：包裹的元素或组件只能有唯一的根元素)
// 2.书写动画对应的类名
const flag = ref(true);
</script>

<template>
  <button @click="flag = !flag">切换</button>
  <!-- 淡入淡出动画 -->
  <Transition>
    <p v-show="flag">我是第一个p标签</p>
  </Transition>

  <!-- 显示：宽高从0到200，隐藏：宽高从200到0 -->
  <Transition name="two">
    <p v-show="flag">我是第二个p标签</p>
  </Transition>
</template>

<style scoped lang="less">
// 以下的三个类名是从无到有   显示
.v-enter-from {
  opacity: 0;
}

.v-enter-active {
  transition: all 5s;
}

.v-enter-to {
  opacity: 1;
}
// 以下的三个是从有到无   销毁
.v-leave-from {
  opacity: 1;
}

.v-leave-active {
  transition: all 5s;
}

.v-leave-to {
  opacity: 0;
}
// --------------------
.two-enter-from {
  width: 0;
  height: 0;
}

.two-enter-active {
  transition: all 5s;
}

.two-enter-to {
  width: 200px;
  height: 200px;
  background-color: skyblue;
}
</style>
